<template>
  <div class="edit">
    <a-modal v-model:visible="visible" title="编辑服务" @ok="onOk">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="服务名称" v-bind="validateInfos.name">
          <a-input v-model:value="form.state.name" placeholder="请输入" maxlength="20" />
        </a-form-item>
        <a-form-item label="服务类型" v-bind="validateInfos.type">
          <a-select v-model:value="form.state.type" allowClear :options="serviceTypeList" style="width: 200px" placeholder="请选择" />
        </a-form-item>
        <a-form-item label="服务简介" v-bind="validateInfos.description">
          <a-textarea v-model:value="form.state.description" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 5 }" maxlength="200" />
        </a-form-item>
        <a-form-item label="回调地址" v-bind="validateInfos.serviceUrl">
          <a-input v-model:value="form.state.serviceUrl" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="服务Logo" v-bind="validateInfos.logo">
          <a-image class="logo" :width="100" :height="100" :preview="false" :src="form.state.logo" />
          <input type="file" class="logo" id="imageFile" accept="image/*" @change="onImageChange" />
        </a-form-item>
        <a-form-item label="开发文档地址" v-bind="validateInfos.docUrl">
          <a-input v-model:value="form.state.docUrl" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { Form, message } from 'ant-design-vue'
  import { computed, reactive, ref, watch } from 'vue'

  import { requestEditService, requestGetServiceByUuid } from '/@/api/manage/openApiService'
  import { requestServiceTypeList } from '/@/api/manage/openApiServiceType'
  import { HttpCodeEnum } from '/@/enums/httpEnum'

  const props = defineProps({
    visible: { type: Boolean, default: false },
    data: { type: Object, default: () => {} },
  })

  const emits = defineEmits(['update:visible', 'success'])
  const visible = computed({
    get: () => props.visible,
    set: (val: boolean) => emits('update:visible', val),
  })

  watch(
    () => visible.value,
    (newVal, oldVal) => {
      if (newVal && !oldVal) initData()
    },
  )
  const initData = () => {
    resetFields()
    getServiceByUuid()
  }
  const serviceTypeList = ref([])
  /** 查询服务类型列表 */
  const getServiceTypeList = async () => {
    const { responseCode, responseData } = await requestServiceTypeList({})
    if (responseCode === HttpCodeEnum.SUCCESS) {
      serviceTypeList.value = responseData.map((item) => ({
        label: item.name,
        value: item.id,
      }))
    }
  }
  getServiceTypeList()

  /** 根据uuid查询服务详情 */
  const getServiceByUuid = async () => {
    const { responseCode, responseData } = await requestGetServiceByUuid({ uuid: props.data.uuid })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      const { name, type, description, serviceUrl, docUrl, logo } = responseData
      form.state.name = name
      form.state.type = type
      form.state.logo = logo
      form.state.description = description
      form.state.serviceUrl = serviceUrl
      form.state.docUrl = docUrl
    }
  }

  const onImageChange = (e) => {
    const file = e.target.files[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (event: any) => {
        // 读取完成后，event.target.result就是图片的Base64编码
        const base64Image = event.target.result
        form.state.logo = base64Image
        console.log(base64Image) // 输出Base64编码的图片数据
      }
      // 读取文件内容
      reader.readAsDataURL(file)
    } else {
      console.log('No file selected')
    }
  }

  /** 表单配置 */
  const form = reactive({
    state: {
      name: '',
      type: '',
      logo: '',
      description: '',
      serviceUrl: '',
      docUrl: '',
    },
    rule: {
      name: [{ required: true, message: '请输入服务名称' }],
      type: [{ required: true, message: '请选择服务类型' }],
      description: [{ required: true, message: '请输入服务简介' }],
      logo: [{ required: true, message: '请选择服务logo' }],
      serviceUrl: [{ required: true, message: '请输入服务地址' }],
      docUrl: [{ required: true, message: '请输入文档地址' }],
    },
    searchSuccess: false,
    onUserPhoneSearch: () => validate('userPhone'),
  })
  /** 表单hook */
  const { validate, validateInfos, resetFields } = Form.useForm(form.state, form.rule)

  /**
   * 确定
   */
  const onOk = () => {
    validate()
      .then(async () => {
        const { name, type, description, serviceUrl, docUrl, logo } = form.state
        const { responseCode } = await requestEditService({
          uuid: props.data.uuid,
          name,
          type,
          logo,
          description,
          serviceUrl,
          docUrl,
        })
        if (responseCode === HttpCodeEnum.SUCCESS) {
          message.success('编辑成功')
          visible.value = false
          emits('success')
        }
      })
      .catch(() => {})
  }
</script>

<style lang="less" scoped>
  .logo {
    position: absolute;
    top: 0;
    width: 100px;
    height: 100px;
    opacity: 0;
    cursor: pointer;
  }
</style>
